
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php print $title;?></title>
<base href="<?php echo base_url();?>" />
<link href="style/base.css" rel="stylesheet" type="text/css" />
<link href="style/houtai.css" rel="stylesheet" type="text/css" />
<link href="style/yindao.css" rel="stylesheet" type="text/css" />
<link href="style/my.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/organictabs.jquery.js"></script>
<script type="text/javascript" src="js/Common.js"></script>
<script type="text/javascript" src="js/Validation.js"></script>
<script type="text/javascript" src="jscript/WdatePicker.js"></script>

</head>
<style>
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}  
.btn input {position: absolute;top: 0; rightright: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}  
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}  
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }  
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }  
.files{height:22px; line-height:22px; margin:10px 0}  
.delimg{margin-left:20px; color:#090; cursor:pointer}
</style>
<script type="text/javascript">
$(function () {
    var bar = $('.bar');  
    var percent = $('.percent');  
    var showimg = $('#showimg');  
    var progress = $(".progress");  
    var files = $(".files");  
    var btn = $(".btn span");  
    $(".demo").wrap("<form id='myupload' action='index.php/fileup/upload' method='post' enctype='multipart/form-data'></form>");  
    $("#fileupload").change(function(){  
        
        $("#myupload").ajaxSubmit({  
            dataType:  'json',  
            beforeSend: function() {  
                showimg.empty();  
                progress.show();  
                var percentVal = '0%';  
                bar.width(percentVal);  
                percent.html(percentVal);  
                btn.html("上传中...");  
            },  
            uploadProgress: function(event, position, total, percentComplete) {  
                var percentVal = percentComplete + '%';  
                bar.width(percentVal)  
                percent.html(percentVal);  
            },  
            /*complete: function(xhr) { 
                $(".files").html(xhr.responseText); 
            },*/  
            success: function(data) {  
                files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");  
                var img = "../upload/"+data.pic;  
                showimg.html("<img src='"+img+"'>");  
                btn.html("添加附件");  
            },  
            error:function(xhr){  
                btn.html("上传失败");  
                bar.width('0')  
                files.html(xhr.responseText);  
            }  
        });  
    });  
      
    $(".delimg").live('click',function(){  
        var pic = $(this).attr("rel");  
        $.post("index.php/fileup/upload?act=delimg",{imagename:pic},function(msg){  
            if(msg==1){  
                files.html("删除成功.");  
                showimg.empty();  
                progress.hide();  
            }else{  
                alert(msg);  
            }  
        });  
    });  
});  
</script>
  
<?php
include 'headyd.php';
?>
<div class="demo">  
        <p>允许上传gif/jpg/png格式的图片，图片体积不能超过500k  
        </p>  
        <div class="btn">  
            <span>添加附件</span>  
            <input id="fileupload" type="file" name="mypic">  
        </div>  
        <div class="progress">  
            <span class="bar"></span><span class="percent">0%</span >  
        </div>  
        <div class="files"></div>  
        <div id="showimg"></div>  
   </div>  